<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript替代v-for</title>
</head>
<body>
    <div id="app">
        <ele :list = "list"></ele>
    </div>

    <script src="./utils/vue.min.js"></script>

    <script>
        Vue.component('ele',{

            // render函数模板写法
            // render: function (createElement) {
            //     let listNodes = this.list.map(item => {return createElement('li',item)});
            //     return createElement('ul',listNodes);
            // },

            // 备注：js数组map方法：这里的map不是“地图”的意思，而是指“映射”
            // 将原来的数组映射到新的数组
            // template模板写法
            template:'<ul>\
                <li v-for = "book in list">{{book}}</li>\
                </ul>',
            props:{
                list:{type: Array}
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                list: [
                    '《Vue.js实战》',
                    '《JavaScript高级程序设计》',
                    '《JavaScript语言精粹》'
                ]
            }
        });

    </script>

</body>
</html>